<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	div {width: 100px; height: 100px; background:  red;margin: 10px; float: left; border: 3px solid black; filter: alpha(opacity:30); opacity: 0.3;}	
</style>
<script>
	function getStyle(obj,name)
	{
			if(obj.currentStyle)
				{
						return obj.currentStyle[name];
				}else{
						return getComputedStyle(obj,false)[name];
				}
	}
	
	window.onload = function()
	{
			var oDiv1 = document.getElementById('div1');
	
			
					//oDiv1.timer = null;
					
					oDiv1.onmouseover= function()
					{
							
							startMove(this,'opacity',100);
					};
					
					oDiv1.onmouseout = function()
					{
							startMove(this,'opacity',30);
					};
		
				
				
	};
	
	//var timer = null;
	
	function startMove(obj,attri,iTarget)
	{
		
				clearInterval(obj.timer);
		
		 	obj.timer = setInterval(function(){
				var cur = parseInt(getStyle(obj,attri));
				var speed = (iTarget-cur)/6;
					
				speed= speed>0?Math.ceil(speed):Math.floor(speed);

				if(iTarget==cur)
					{

						clearInterval(obj.timer);
					}else{
						obj.style[attri] = cur + speed + 'px';
					}
					
			},30);
		
	}
</script>
</head>

<body>
<div id="div1">变高</div>

</body>
</html>
